<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>流浪书屋--购物车</title>
		<link rel="stylesheet" type="text/css" href="css/shoppingcart.css">
		<script type="text/javascript">
			function checkSubmit() {
				var flag = true;
				var pro = document.getElementById("province");
				var addr = document.getElementById("addr");
				var zip = document.getElementById("zip");
		
				if (pro.value.length == 0) {
					flag = false;
					document.getElementById("provinceSpan").innerHTML = "此项不能为空";
					pro.style.backgroundColor = "#CCCCCC";
				} else {
					document.getElementById("provinceSpan").innerHTML = "";
					pro.style.backgroundColor = "#ffffff";
				}
				if (addr.value.length == 0) {
					flag = false;
					document.getElementById("addrSpan").innerHTML = "此项不能为空";
					addr.style.backgroundColor = "#CCCCCC";
				} else {
					document.getElementById("addrSpan").innerHTML = "";
					addr.style.backgroundColor = "#ffffff";
		
				}
				if (zip.value.length == 0) {
					flag = false;
					document.getElementById("zipSpan").innerHTML = "此项不能为空";
					zip.style.backgroundColor = "#CCCCCC";
				} else {
					document.getElementById("zipSpan").innerHTML = "";
					zip.style.backgroundColor = "#ffffff";
				}
				return flag;
			}
			
			var t;
			function change(t){
				var amount = document.getElementById("amount"+t);
				var bookPrice=document.getElementById("bookPrice"+t);
				/*alert(amount.value);
				alert(amount.value.match(/^[0-9]*[1-9][0-9]*$/));*/
		/*||!Regex.IsMatch(amount.value,"^[0-9]*[1-9][0-9]*$")*/
				if(amount.value.length==0||amount.value.match(/^[0-9]*[1-9][0-9]*$/)==null){
					document.getElementById("show").innerHTML="商品数量不能为空，且必须为正整数";	
					alert("商品数量不能为空，且必须为正整数");
				}
				else{
					document.getElementById("sum"+t).value=(bookPrice.value*amount.value*1).toFixed(2);
					var j=document.getElementById("j").value;
					var total=document.getElementById("total");
					var memberTotal=document.getElementById("memberTotal");
					memberTotal.value=0*1;
					total.value=0*1;
					for(var q =0;q<j;q++){
						total.value=(total.value*1+document.getElementById("sum"+q).value*1).toFixed(2);
						memberTotal.value=(memberTotal.value*1+ document.getElementById("memberPrice"+q).value*document.getElementById("amount"+q).value*1).toFixed(2);
					}			
					document.getElementById("save").value=(total.value-memberTotal.value).toFixed(2);
				}
			}
		</script>
	</head>
	<body>
		<%@  include file="top.jsp"%>
		<div id="MIDDLE">

			<span style="color: #ff0000; font-size: 12px;">*标识的项不能为空</span>
			<!-- 右侧 -->
			<div id="RIGHT">
				<form action="${CONTEXT_ROOT}/OrderServlet" method="post"
					onsubmit="return checkSubmit()">
					
					<input type="hidden" value="${size}" name="j" id="j" />
					<input type="hidden" name="method" value="add">
					<div style="width: 800px;">
						<table border="0" width="600px" style="float: left;">
							<tr>
								<td align="left">
									&nbsp;
									<font color="#006699" size="4">订单收货人信息</font>
								</td>
							</tr>
						</table>

						<table style="float: left;" width="600px" border="0"
							cellpadding="0" cellspacing="0" bordercolor="#0066CC"
							class="border1">
							<tr>
								<td width="35%" align="right" class="border2 border3">
									收货人姓名：
								</td>
								<td align="left" class="border2">
									&nbsp;
									<input type="text" name="orderAcceptPerson"
										value="${member.name}" size="28">
								</td>
							</tr>
							<tr>
								<td align="right" class="border2 border3">
									收货人电话：
								</td>
								<td align="left" class="border2">
									&nbsp;
									<input type="text" name="orderAcceptTel" value="${member.tel}"
										size="28">
								</td>
							</tr>
							<tr>
								<td align="right" class="border2 border3">
									收货人手机：
								</td>
								<td align="left" class="border2">
									&nbsp;
									<input type="text" name="orderAcceptMobile" size="28">
								</td>
							</tr>
							<tr>
								<td align="right" class="border3">
									收货人邮箱：
								</td>
								<td align="left">
									&nbsp;
									<input type="text" name="orderAcceptEmail"
										value="${member.email}" size="28">
								</td>
							</tr>
						</table>
						<table border="0" width="600px" style="float: left;">
							<tr>
								<td align="left">
									&nbsp;
									<font color="#006699" size="4">订单收货信息</font>
								</td>
							</tr>

						</table>

						<table style="float: left;" width="600px" border="0"
							cellpadding="0" cellspacing="0" bordercolor="#0066CC"
							class="border1">
							<tr>
								<td width="35%" align="right" class="border2 border3">
									收货地区：
								</td>
								<td align="left" class="border2">
									&nbsp;
									<input type="text" name="orderAcceptProvince"
										value="${member.area}" size="28" id="province">
									<span style="color: #ff0000;">*<span id="provinceSpan"></span>
									</span>
								</td>
							</tr>
							<tr>
								<td align="right" class="border2 border3">
									收货地址：
								</td>
								<td align="left" class="border2">
									&nbsp;
									<input type="text" name="orderAcceptAddr"
										value="${member.address}" size="28" id="addr">
									<span style="color: #ff0000;">*<span id="addrSpan"></span>
									</span>
								</td>
							</tr>
							<tr>
								<td align="right" class="border3">
									邮编：
								</td>
								<td align="left">
									&nbsp;
									<input type="text" name="orderAcceptZip" value="${member.zip}"
										size="28" id="zip">
									<span style="color: #ff0000;">*<span id="zipSpan"></span>
									</span>
								</td>
							</tr>
						</table>
						<div
							style="width: 800px; text-align: left; height: 35px; font-size: 18px; vercial-align: middle; line-height: 35px;">
							图书订单详细信息--
							<font size="2px">(如需修改，请进入<a
								href="${CONTEXT_ROOT}/shoppingCart.jsp">购物车</a>)</font>
						</div>
						<table width="800px" border="0"
							cellpadding="0" cellspacing="0" bordercolor="#0066CC"
							class="border1">
						<c:set var="i" value="0"></c:set>
						<c:forEach items="${shoppingcart.carts}" var="book">
							<tr>
								<td width="20%">
									${book.bookName}
									<input type="hidden" name="bookId" value="${book.bookId}" />
								</td>
								<td width="15%">
									￥
									<input type="text" readonly="readonly" name="bookPrice"
										id="bookPrice${i}" value="<fmt:formatNumber
											value='${book.bookPrice}' pattern='.##'/>" size="7"
										style="border: 0; color: #ff0000;" />
								</td>
								<c:if test="${not empty member}">
									<td width="15%">
										￥
										<input type="text" readonly="readonly" name="memberPrice"
											id="memberPrice${i}" value="<fmt:formatNumber
											value='${book.memberPrice}' pattern='.##'/>" size="7"
											style="border: 0; color: #ff0000;" />
									</td>
								</c:if>
								<td width="10%">
									<input type="text" name="amount" style="text-align: center"
										value="${book.amount}" id="amount${i}"
										onchange="return change(${i});" size="4" />
								</td>
								<td width="20%">
									￥
									<input type="text" readonly="readonly" name="sum" id="sum${i}"
										value="<fmt:formatNumber
											value='${book.sum}' pattern='.##'/>"
										size="10" style="border: 0; color: #ff0000;" />

								</td>
								<td width="20%">
									<a
										href="${CONTEXT_ROOT}/ShoppingCartServlet?method=del&bookId=${book.bookId}">【取消】</a>&nbsp;&nbsp;
									<a href="#">【收藏】</a>
								</td>
							</tr>
							<c:set var="i" value="${i+1}"></c:set>
						</c:forEach>
					</table>
					<table width="800px" border="0">
						<tr>
							<td>
								商品实际金额：￥
								<input type="text" readonly="readonly" id="total"
									value="<fmt:formatNumber
											value='${shoppingcart.total}' pattern='.##'/>" size="15"
									style="border: 0; color: #ff0000;" />

							</td>
							<td>
								会员支付金额：￥
								<input type="text" readonly="readonly" id="memberTotal"
									value="<fmt:formatNumber
											value='${shoppingcart.memberTotal}' pattern='.##'/>" size="15"
									style="border: 0; color: #ff0000;" />

							</td>
							<td>
								此次交易节省：￥
								<input type="text" readonly="readonly" id="save"
									value="<fmt:formatNumber
											value='${shoppingcart.total-shoppingcart.memberTotal}' pattern='.##'/>"
									size="15" style="border: 0; color: #ff0000;" />

							</td>
						</tr>
						<tr>
							<td colspan="3" align="right">
								<span
									style="margin-right: 50px; color: #ff0000; font-size: 12px;"
									id="show"></span>
									<input type="submit" name="button" value="确认提交订单"
										style="margin-right: 50px;">
								</td>
							</tr>
						</table>
					</div>
				</form>
			</div>
		</div>
		<%@  include file="bottom.jsp"%>
	</body>
</html>